{% extends "base.html" %}

{% block title %}系统架构{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col">
            <h2 class="mb-3">系统架构</h2>
            
            <!-- 搜索表单 -->
            <form method="get" class="card card-body bg-light mb-4">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="name" class="form-label text-dark">方案名称</label>
                        <input type="text" class="form-control" id="name" name="name" 
                               value="{{ search_name }}">
                    </div>
                    <div class="col-md-4">
                        <label for="type" class="form-label text-dark">架构类型</label>
                        <select class="form-select" id="type" name="type">
                            <option value="">全部</option>
                            <option value="centralized" {% if search_type == 'centralized' %}selected{% endif %}>
                                集中式
                            </option>
                            <option value="distributed" {% if search_type == 'distributed' %}selected{% endif %}>
                                分布式
                            </option>
                            <option value="hybrid" {% if search_type == 'hybrid' %}selected{% endif %}>
                                混合式
                            </option>
                        </select>
                    </div>
<div class="col-md-4 d-flex align-items-end">
                        <div class="d-flex gap-2 w-100">
                            <button type="submit" class="btn btn-primary flex-grow-1">
                                <i class="fas fa-search me-1"></i>搜索
                            </button>
                            <a href="{{ url_for('main.architecture_list') }}" class="btn btn-secondary">
                                <i class="fas fa-undo me-1"></i>重置
                            </a>
                        </div>
                    </div>
                </div>
            </form>
            
            <!-- 创建按钮 -->
            {% if current_user.role in ['engineer', 'manager'] %}
            <div class="mb-4">
                <a href="{{ url_for('main.create_architecture') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-1"></i>新建架构方案
                </a>
            </div>
            {% endif %}
            
            <!-- 架构方案列表 -->
            <div class="row row-cols-1 row-cols-md-3 g-4">
                {% for architecture in architectures %}
                <div class="col">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <a href="{{ url_for('main.architecture_detail', architecture_id=architecture.id) }}" 
                                   class="text-decoration-none">
                                    {{ architecture.name }}
                                </a>
                            </h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                <small class="text-muted">所属项目：</small>
                                <a href="{{ url_for('main.project_detail', project_id=architecture.project.id) }}" 
                                                       class="text-decoration-none">
                                    {{ architecture.project.name }}
                                </a>
                            </p>
                            <p class="card-text">
                                <small class="text-muted">架构类型：</small>
                                {% if architecture.architecture_type == 'centralized' %}集中式
                                {% elif architecture.architecture_type == 'distributed' %}分布式
                                {% elif architecture.architecture_type == 'hybrid' %}混合式
                                {% endif %}
                            </p>
                            <p class="card-text">
                                <small class="text-muted">更新时间：</small>
                                {{ architecture.updated_at.strftime('%Y-%m-%d %H:%M') }}
                            </p>
                            {% if architecture.description %}
                            <p class="card-text">{{ architecture.description|truncate(100) }}</p>
                            {% endif %}
                        </div>
                        <div class="card-footer bg-transparent">
                            <div class="btn-group w-100">
                                <a href="{{ url_for('main.architecture_detail', architecture_id=architecture.id) }}" 
                                   class="btn btn-outline-primary">
                                    <i class="fas fa-eye me-1"></i>查看
                                </a>
                                {% if current_user.role in ['engineer', 'manager'] and 
                                      (current_user.role == 'manager' or architecture.project.creator_id == current_user.id) %}
                                <a href="{{ url_for('main.edit_architecture', architecture_id=architecture.id) }}" 
                                   class="btn btn-outline-secondary">
                                    <i class="fas fa-edit me-1"></i>编辑
                                </a>
                                <button type="button" class="btn btn-outline-danger" 
                                        onclick="confirmDelete('{{ architecture.id }}', '{{ architecture.name|e }}')">
                                    <i class="fas fa-trash-alt me-1"></i>删除
                                </button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                {% else %}
                <div class="col-12">
                    <div class="alert alert-info mb-0" role="alert">
                        <i class="fas fa-info-circle me-2"></i>暂无架构方案
                    </div>
                </div>
                {% endfor %}
            </div>
            
            <!-- 分页 -->
            {% if pagination.pages > 1 %}
            <nav aria-label="Page navigation" class="mt-4">
                <ul class="pagination justify-content-center">
                    <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
                        <a class="page-link" href="{% if pagination.has_prev %}{{ url_for('main.architecture_list', 
                           page=pagination.prev_num, name=search_name, type=search_type) }}{% else %}#{% endif %}">
                            上一页
                        </a>
                    </li>
                    
                    {% for page in pagination.iter_pages() %}
                        {% if page %}
                            <li class="page-item {% if page == pagination.page %}active{% endif %}">
                                <a class="page-link" href="{{ url_for('main.architecture_list', 
                                   page=page, name=search_name, type=search_type) }}">
                                    {{ page }}
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">...</span>
                            </li>
                        {% endif %}
                    {% endfor %}
                    
                    <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
                        <a class="page-link" href="{% if pagination.has_next %}{{ url_for('main.architecture_list', 
                           page=pagination.next_num, name=search_name, type=search_type) }}{% else %}#{% endif %}">
                            下一页
                        </a>
                    </li>
                </ul>
            </nav>
            {% endif %}
        </div>
    </div>
</div>

<!-- 删除确认对话框 -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content bg-light">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>确认删除
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-dark mb-0">
                    <strong>您确定要删除以下架构方案吗？</strong><br>
                    方案名称：<span id="architectureName" class="fw-bold"></span><br>
                    <small class="text-danger">
                        <i class="fas fa-exclamation-circle me-1"></i>此操作不可恢复！
                    </small>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>取消
                </button>
                <form id="deleteForm" method="post" style="display: inline;">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash-alt me-1"></i>确认删除
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function confirmDelete(architectureId, architectureName) {
    document.getElementById('architectureName').textContent = architectureName;
    document.getElementById('deleteForm').action = "{{ url_for('main.delete_architecture', architecture_id=0) }}".replace('0', architectureId);
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}
</script>
{% endblock %} 